<!DOCTYPE html>
<html>

<head>
  <title>星期五快捷酒店</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/system.css">
  <link rel="icon" href="../favicon.ico">
  <script src="../js/bootstrap.js"></script>
  <script src="../js/ajax.js"></script>
  <script src="../js/jquery.min.js"></script>
  <link rel="stylesheet" href="../font/iconfont.css">
  <script src="../font/iconfont.js"></script>
</head>

<body>

  <main>
    <div class="d-flex flex-column flex-shrink-0 p-3 text-white bg-primary" style="width: 280px;">
      <span class="fs-4"> <span class="iconfont icon-jiudianzhusu" style="font-size:24px ;"></span>five
                HOTEL</span>
      <hr>
      <ul class="nav nav-pills flex-column mb-auto">
        <li class="nav-item">
            <a href="./home.html" class="nav-link active">
                <span class="iconfont icon-zhuye"></span> &nbsp;主页
            </a>
        </li>
        <li>
            <a href="./roomMessage.html" class="nav-link text-white">
                <span class="iconfont icon-yingyongzhongxin"></span> &nbsp;基本房间信息管理
            </a>
        </li>
        <li>
            <a href="./roomSortMessage.html" class="nav-link text-white">
                <span class="iconfont icon-yingyongzhongxin"> &nbsp;房间分类信息管理
            </a>
        </li>
        <li>
            <a href="./order.html" class="nav-link text-white">
                <span class="iconfont icon-yingyongzhongxin"> 订单管理
            </a>
        </li>
        <li>
            <a href="./custmoer.html" class="nav-link text-white">
                <span class="iconfont icon-yingyongzhongxin"> &nbsp;顾客信息管理
            </a>
        </li>
        <li>
            <a href="./employee.html" class="nav-link text-white">
                <span class="iconfont icon-yingyongzhongxin"> &nbsp;员工信息管理
            </a>
        </li>
        <li>
            <a href="./updatePssword.html" class="nav-link text-white">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                    class="bi bi-key" viewBox="0 0 16 16">
                    <path
                        d="M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8zm4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5z" />
                    <path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
                </svg> &nbsp;账户管理
            </a>
        </li>
    </ul>
      <hr>
    </div>

    <div class="b-example-divider" style="overflow-x: hidden;width:calc(100% - 280px)">
      <div class="header" style="width: 100%; height:68px; background-color:#0d6efd; margin-top: -1px;">
        <div class="row">
          <div class="col-lg-8" style="color:#fff; font-size:30px; line-height:68px; padding-left:60px;"
            id="headerLeft"></div>
          <div class="col-lg-4" style="color:#fff; font-size:30px; line-height:68px; padding-left:60px;">
            欢迎你！
            <img src="../img/avatar.jpg" style="width: 40px; border-radius:35%;">&emsp;<span id="uname">管理员</span>
            <button type="button" class="btn btn-danger btn-sm" id="logout">退出</button>
          </div>
        </div>
        <div style="width: 80%;margin:40px auto 0;">
          <button class="btn btn-primary" style="margin-bottom:20px" data-bs-toggle="modal"
            data-bs-target="#myModal1">添加</button>
          <button style="margin-bottom: 20px" class="btn btn-success" onclick="getGender('男')">查询男</button>
          <button style="margin-bottom: 20px" class="btn btn-success" onclick="getGender('女')">查询女</button>
          <button style="margin-bottom: 20px" class="btn btn-success" onclick="showCustmoer()">查询所有</button>
          &emsp;
          <input type="text" placeholder="请输入顾客的姓名" id="cuName"><button onclick="findName()">查询</button>

          <table class="table  table-hover">
            <thead>
              <tr>
                <th>身份证</th>
                <th>姓名</th>
                <th>性别</th>
                <th>手机号</th>
                <th>房间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>

            </tbody>
          </table>
          <button id="first" onclick="first()">首页</button>
          <button id="up" onclick="up()">上一页</button>
          <span id="pages"></span>
          <button id="next" onclick="next()">下一页</button>
          <button id="last" onclick="last()">尾页</button>
        </div>
      </div>
    </div>


    <!-- 添加模态框 -->
    <div>
      <div class="modal fade" id="myModal1">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
              <h4 class="modal-title">添加顾客信息</h4>
              <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <!-- 模态框内容 -->
            <div class="modal-body">
              <form>
                <div class="row" style="margin-bottom:10px">
                  <div class="col-lg-2">
                    <span style="font-size: 24px">身份证</span>
                  </div>
                  <div class="col-lg-10">
                    <input type="text" class="form-control" id="cuscid" placeholder="请输入身份证">
                  </div>
                </div>
                <div class="row" style="margin-bottom:10px">
                  <div class="col-lg-2">
                    <span style="font-size: 24px">姓名</span>
                  </div>
                  <div class="col-lg-10">
                    <input type="text" class="form-control" id="cusname" placeholder="请输入姓名">
                  </div>
                </div>
                <div class="row" style="margin-bottom:10px">
                  <div class="col-lg-2">
                    <span style="font-size: 24px">性别</span>
                  </div>
                  <div class="col-lg-10" style="line-height:32px">
                    <label><input type="radio" checked class="ssex" name="sex" value="男">男</label>&nbsp;
                    <label><input type="radio" class="ssex" name="sex" value="女">女</label>
                  </div>
                </div>
                <div class="row" style="margin-bottom:10px">
                  <div class="col-lg-2">
                    <span style="font-size: 24px">手机号</span>
                  </div>
                  <div class="col-lg-10">
                    <input type="text" class="form-control" id="cusphone" placeholder="请输入手机号">
                  </div>
                </div>
                <div class="row" style="margin-bottom:10px">
                  <div class="col-lg-2">
                    <span style="font-size: 24px">房间号</span>
                  </div>
                  <div class="col-lg-10">
                    <input type="text" class="form-control" id="cusadress" placeholder="请输入房间号">
                  </div>
                </div>
              </form>
            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
              <button type="button" class="btn btn-success" onclick="addcus()">确定</button>
              <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 修改模态框 -->
    <div class="modal" id="myModal">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">

          <!-- 模态框头部 -->
          <div class="modal-header">
            <h4 class="modal-title">修改顾客信息</h4>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>

          <!-- 模态框内容 -->
          <div class="modal-body">
            <div class="row" style="margin-bottom:10px">
              <div class="col-lg-2">
                <span style="font-size: 24px;">身份证</span>
              </div>
              <div class="col-lg-10">
                <input type="text" class="form-control" id="idcard" placeholder="请输入身份证">
              </div>
            </div>
            <div class="row" style="margin-bottom:10px">
              <div class="col-lg-2">
                <span style="font-size: 24px">姓名</span>
              </div>
              <div class="col-lg-10">
                <input type="text" class="form-control" id="cname" placeholder="请输入姓名">
              </div>

            </div>
            <div class="row" style="margin-bottom:10px">
              <div class="col-lg-2">
                <span style="font-size: 24px">性别</span>
              </div>
              <div class="col-lg-10" style="line-height:32px">
                <label><input type="radio" checked class="cgender" name="sex" value="男">男</label>&nbsp;
                <label><input type="radio" class="cgender" name="sex" value="女">女</label>
              </div>
            </div>
            <div class="row" style="margin-bottom:10px">
              <div class="col-lg-2">
                <span style="font-size: 24px">手机</span>
              </div>
              <div class="col-lg-10">
                <input type="text" class="form-control" id="cphone" placeholder="请输入手机号">
              </div>
            </div>
            <div class="row" style="margin-bottom:10px">
              <div class="col-lg-2">
                <span style="font-size: 24px">房间</span>
              </div>
              <div class="col-lg-10">
                <input type="text" class="form-control" id="roomAdress" placeholder="请输入房间号">
              </div>
            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
              <button type="button" class="btn btn-success" onclick="cusUpdate()">确认</button>
              <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
            </div>

          </div>
        </div>
      </div>
  </main>
  <script src="../js/custmoer.js"></script>
  <!-- <script src="../js/header.js"></script> -->
</body>

</html>